<template>
  <div class="hot">
    <h1 class="title">热门歌单推荐</h1>
    <ul>
      <li class="item" v-for="item of hotList" :key="item.dissid">
        <div class="icon">
          <img class="img" v-lazy="item.imgurl">
        </div>
        <div class="text">
          <h2 class="name">{{item.creator.name}}</h2>
          <p class="disc">{{item.dissname}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Hot',
  props: {
    hotList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  @import "~common/stylus/mixin.styl"
  .hot
    margin 0 10px
    .title
      height 65px
      line-height 65px
      text-align center
      font-size 14px
      color: $color-theme
    .item
      display flex
      align-items center
      box-sizing border-box
      padding 0 20px 20px 10px
      .icon
        // flex 0 0 60px
        height 60px
        width 60px
        padding-right 20px
        .img
          width 100%
      .text
        display flex
        flex-direction column
        justify-content center
        flex 1
        line-height 20px
        overflow hidden
        font-size $font-size-medium
        .name
          margin-bottom 10px
          color #ccc
        .disc
          color $color-text-d
          ellipsis()
</style>
